<template>
  <view class="itemIntroduction">
    <view class="top">
      <view class="itemName" style="font-size: 45rpx"
        >项目名：{{ itemsInfo.proName }}</view
      >
      <view class="itemMenber">
        <a style="margin-top: 30rpx; font-size: 45rpx">开发成员</a>
        <scroll-view class="scrollContainer" scroll-x>
          <view
            class="scrollitem"
            v-for="(member, index) in teamMembersInfo"
            :key="index"
          >
            <view class="scrollimage">
              <image
                :src="
                  member.headUrl
                    ? member.headUrl
                    : 'https://alixeu-test.oss-cn-guangzhou.aliyuncs.com/achobate/AchoBeta_logo.png'
                "
              ></image>
              <!-- <u-avatar :size="large" :src="member.headUrl"></u-avatar> -->
            </view>
            <view class="menbersName">
              <text
                style="
                  font-size: 35rpx;
                  font-weight: 600;
                  max-width: 150rpx;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
                >{{ member.userName }}</text
              >
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="itemProgress" style="margin-top: 30rpx; font-size: 45rpx">
        开发进度：
        <!-- <u-line-progress active-color="#2979ff" :percent="70"></u-line-progress> -->
        <view class="doneIf">
          {{ itemsInfo.develState == 1 ? '已完成' : '未完成' }}
        </view>
      </view>
    </view>

    <view class="bottom">
      <view
        class="title"
        style="
          font-size: 45rpx;
          font-weight: 600;
          margin-top: 50rpx;
          margin-bottom: -20rpx;
        "
      >
        奖项
        <u-icon name="arrow-down" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="prize" v-show="itemsInfo.awardsInfo.length">
        <view
          class="prizeInfo"
          v-for="(prizeInfo, index) in itemsInfo.awardsInfo"
          :key="index"
        >
          <a style="font-size: 40rpx; font-weight: 600"
            >· {{ prizeInfo.awardsName }}</a
          >
        </view>
      </view>
      <view
        v-show="!itemsInfo.awardsInfo.length"
        style="margin: 30rpx 20rpx; font-size: 40rpx; font-weight: 400"
      >
        奖项还在路上 ～
      </view>

      <view class="daChuangPart">
        <view
          class="title"
          style="
            font-size: 45rpx;
            margin-top: 50rpx;
            margin-bottom: -20rpx;
            font-weight: 600;
          "
        >
          大创
          <u-icon name="arrow-down" color="#2979ff" size="28"></u-icon>
        </view>
        <view
          class="daChuang"
          style="padding: 5rpx; font-size: 40rpx; font-weight: 500"
          v-show="daisoInfo.daisoName"
        >
          <view class="itemName" style="font-size: 40rpx; margin-bottom: 10rpx"
            >名称：{{ daisoInfo.daisoName }}</view
          >

          <view class="daChuangInfo">
            成员列表
            <scroll-view class="scrollContainer" scroll-x>
              <view
                class="scrollitem"
                v-for="(dachuangMember, index) in daChuangTeamMenbersList"
                :key="index"
              >
                <view class="scrollimage">
                  <image
                    style="width: 120rpx; height: 120rpx; border-radius: 60rpx"
                    :src="
                      dachuangMember.headUrl
                        ? dachuangMember.headUrl
                        : 'https://alixeu-test.oss-cn-guangzhou.aliyuncs.com/achobate/AchoBeta_logo.png'
                    "
                  ></image>
                  <!-- <u-avatar :size="large" :src="member.headUrl"></u-avatar> -->
                </view>
                <view class="menbersName">
                  <a
                    style="
                      font-size: 35rpx;
                      font-weight: 600;
                      max-width: 150rpx;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    "
                    >{{ dachuangMember.userName }}</a
                  >
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
        <view
          v-show="!daisoInfo.daisoName"
          style="margin: 30rpx 20rpx; font-size: 40rpx; font-weight: 400"
        >
          暂无大创信息
        </view>
      </view>

      <view class="compition">
        <view class="title" style="font-size: 45rpx">
          比赛
          <u-icon name="arrow-down" color="#2979ff" size="28"></u-icon>
        </view>

        <view class="prize" v-show="itemsInfo.matchInfo.length">
        <view
          class="prizeInfo"
          v-for="(prizeInfo, index) in itemsInfo.matchInfo"
          :key="index"
        >
          <a style="font-size: 40rpx; font-weight: 600"
            >· {{ prizeInfo.matchName }}</a
          >
           <a style="font-size: 35rpx；font-weight:400; margin-left:50rpx"
            >进度 -- {{ prizeInfo.matchRunning }}</a
          >
        </view>
      </view>
      <view
        v-show="!itemsInfo.matchInfo.length"
        style="margin: 30rpx 20rpx; font-size: 40rpx; font-weight: 400"
      >
        暂无比赛信息 ～
      </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { getItemsMoreInfo } from '../../../../utils/modules/item.js'
import { getMenberSelfInfo } from '../../../../utils/modules/member.js'
import { useMainStore } from '../../../../stores/index'
const mainStore = useMainStore()
const keyword = ref('11')

const infoId = ref(1)
// console.log(infoId.value)

const prize = ref([])
const itemIdList = ref([])
const itemsInfo = ref({})
const itemsNum = ref(0)
function getItemsIdList() {
  getItemsMoreInfo({
    id: mainStore.projectId
  }).then((res) => {
    itemsInfo.value = res.data.data
  })
}

const MenberIds = ref([])
const teamMembersInfo = ref([])
function getMenberInfo() {
  for (let i = 0; i < develTeamInfo.value.teamMemberIds.length; i++) {
    getMenberSelfInfo({
      id: develTeamInfo.value.teamMemberIds[i]
    }).then((res) => {
      teamMembersInfo.value[i] = res.data.data
    })
  }
}

const daChuangTeamMenbersList = ref([])
function getDachuangMenberInfo() {
  console.log(daisoInfo.value.daisoTeam.teamMemberIds)
  for (let i = 0; i < daisoInfo.value.daisoTeam.teamMemberIds.length; i++) {
    getMenberSelfInfo({
      id: daisoInfo.value.daisoTeam.teamMemberIds[i]
    }).then((res) => {
      daChuangTeamMenbersList.value[i] = res.data.data
    })
  }
}

function getItemDevelMenberInfo() {
  console.log('下面是获取项目信息')
  getMenberInfo()
}

const develTeamInfo = ref({})
const daisoInfo = ref({})
const matchInfo = ref([])
const showIf = ref(false)
setTimeout(() => {
  console.log(itemsInfo.value)
  develTeamInfo.value = itemsInfo.value.develTeam
  daisoInfo.value = itemsInfo.value.daisoInfo
  matchInfo.value = itemsInfo.value.matchInfo
}, 500)

setTimeout(() => {
  getItemDevelMenberInfo()
  getDachuangMenberInfo()
  console.log(daChuangTeamMenbersList.value)
  showIf.value = true
}, 1000)
getItemsIdList()
</script>

<style lang="scss">
.itemIntroduction {
  padding: 24rpx;
  padding: 5%;
  margin: 10rpx;
  background: linear-gradient(to right, #87d5f2, #99a9bf);
  border-radius: 10rpx;
  min-height: 1500rpx;
  margin-bottom: 40rpx;

  .top {
    .itemName {
      display: flex;
      // justify-content: center;
      font-size: 40rpx;
      font-weight: 600;
      margin-top: 10rpx;
    }

    .itemMenber {
      font-size: 40rpx;
      font-weight: 600;
      margin-top: 30rpx;

      .scrollimage {
        margin-top: 20rpx;
        border-radius: 75rpx;

        image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
        }
      }

      .menbersName {
        display: flex;
        justify-content: center;
      }

      .recommandItemText {
        width: 270rpx;
        text-align: center;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      .EmptyData {
        text-align: center;
        margin-top: 50rpx;
      }
    }

    .itemProgress {
      // margin-top: -20rpx;
      font-size: 40rpx;
      font-weight: 600;
      // color: #c1eeff;
      display: flex;
      flex-direction: row;

      .doneIf {
        color: #ff3c50;
      }
    }
  }

  .bottom {
    margin-bottom: -10rpx;
    .prize {
      margin-top: 30rpx;

      .title {
        font-size: 40rpx;
        font-weight: 600;
      }
      .prizeInfo {
        font-size: 35rpx;
      }
    }

    .daChuang {
      margin-top: 30rpx;

      .title {
        font-size: 40rpx;
        font-weight: 600;
      }
    }

    .compition {
      margin-top: 30rpx;

      .title {
        font-size: 40rpx;
        font-weight: 600;
      }
    }
  }
}

.u-row {
  margin: 40rpx 0;
}

.demo-layout {
  height: 80rpx;
  border-radius: 8rpx;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.bg-purple-dark {
  background: #99a9bf;
}

// 容器
.scrollContainer {
  width: 666rpx;
  height: 234rpx;
  white-space: nowrap;
}

// 容器项
.scrollitem {
  display: inline-block;
  margin-left: 30rpx;
  //   width: 400rpx;
  height: 234rpx;
}
</style>
